<template>
    <div class="app-container">
        <div class="container-fluid">
            <div
                @click="ChangeType(1)"
                :style="
                    type == 1
                        ? 'border: none;border-top: 4px solid rgb(37,164,246);color: rgb(37,164,246);font-weight: bold;'
                        : ''
                "
            >
                资源申请订单
            </div>
            <div
                @click="ChangeType(2)"
                :style="
                    type == 2
                        ? 'border: none;border-top: 4px solid rgb(37,164,246);color: rgb(37,164,246);font-weight: bold;'
                        : ''
                "
            >
                资源变更订单
            </div>
        </div>
        <div style="text-align: right; background-color: #fff">
            <el-select style="width: 130px;" clearable filterable v-model="queryParams.cloudSupplier" placeholder="请选择云服务商">
                <el-option
                v-for="item in logicListALL"
                :key="item.value"
                :label="item.cloudSupplierName"
                :value="item.cloudSupplier">
                </el-option>
            </el-select>
            <el-cascader
                :options="deptOptions"
                v-model="officeId"
                :props="{value:'id',checkStrictly: true}"
                :show-all-levels="false"
                placeholder="请选择部门"
                change-on-select
                clearable filterable
                @change="handleChange">
            </el-cascader>
            <!-- <el-input
                style="width: 200px; margin-right: 20px"
                placeholder="关键字"
                v-model="queryParams.searchValue"
                clearable
                @keyup.enter.native="ChangeType(type)"
            >
            </el-input> -->
            <el-button type="primary" @click="ChangeType(type)">搜索</el-button>
        </div>
        <div style="background-color: #fff; padding: 30px 0; padding-top: 20px">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="工单ID">
                    <template slot-scope="scope">
                        <span style="color: rgb(24, 144, 255);cursor: pointer;" @click="OrderDetails(scope.row)">{{scope.row.id}}</span>
                    </template>
                </el-table-column>
                <el-table-column  label="应用名称">
                    <template slot-scope="scope">
                        {{scope.row.projectName ? scope.row.projectName : scope.row.cloudUpName}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="officeName"
                    label="所属单位"
                ></el-table-column>
                <el-table-column
                    prop="cloudSupplierName"
                    label="云服务商"
                ></el-table-column>
                <el-table-column
                    prop="createByName"
                    label="申请人"
                ></el-table-column>
                <el-table-column
                    prop="createTime"
                    label="申请时间"
                ></el-table-column>
                <el-table-column
                    prop="bpmStatus"
                    label="订单状态"
                >
                    <template slot-scope="scope">
                        <i :style="scope.row.bpmStatus == '已完成' ? 'display: inline-block;background-color: #65c83f;vertical-align: middle;width: 20px; height: 20px;margin-right: 5px;border-radius: 20px;':'display: inline-block;background-color: #ccc;vertical-align: middle;width: 20px; height: 20px;margin-right: 5px;border-radius: 20px;'">
                        </i>
                        <span>{{scope.row.bpmStatus}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-if="type == 1"
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getData"
            />
            <pagination
                v-if="type == 2"
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getDatas"
            />
        </div>
        <el-dialog
            v-if="DetailsData"
            :title="dialogtitle"
            :visible.sync="dialogVisible"
            width="70%"
        >
            <div class="tracking">
                <div class="titles">
                    <span>基本信息</span>
                </div>
                <div class="content">
                    <ul>
                        <li>订单ID:{{DetailsData.id}}</li>
                        <li>申请人:{{DetailsData.createBy}}</li>
                        <li>申请单位:{{DetailsData.officeName}}</li>
                    </ul>
                    <ul>
                        <li>应用系统:{{DetailsData.projectName}}</li>
                        <li>申请时间:{{DetailsData.createTime}}</li>
                        <li>云服务商:{{DetailsData.cloudSupplierName}}</li>
                    </ul>
                    <ul>
                        <li>申请类型:{{dialogtitle.replace('订单详情','')}}</li>
                        <li>交付时间:</li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="titles">
                <span>资源清单</span>
            </div>
            <div class="basic-information" v-if="type == 1">
                <!-- <div class="title">
                    <span>资源清单</span>
                </div> -->
                <div class="footer">
                    <div class="Table-title">云主机</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.hosts" style="width: 100%">
                            <el-table-column
                                prop="instanceName"
                                label="名称"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="规格"
                                width="180"
                            >
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.flavorType == 2">{{cloudFlavorCodeName(scope.row.cloudFlavorCode)}}</span>
                                    <span v-if="scope.row.flavorType == 1">{{ scope.row.cpuNumber }}核vCPU；{{ scope.row.memorySize }}G内存；</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="osName"
                                label="操作系统"
                            ></el-table-column>
                            <el-table-column
                                prop="address"
                                label="系统盘容量"
                            >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.flavorType == 1">{{
                                        scope.row.osDisk?scope.row.osDisk.diskServerName:''
                                    }}，{{ scope.row.osDisk?scope.row.osDisk.dataDiskSize:'' }}GB</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="数据盘容量"
                            >
                                <template slot-scope="scope">
                                    <div
                                        v-if="scope.row.flavorType == 1 && scope.row.disks"
                                        style="margin: 0 0 6px 16px"
                                        v-for="(item, index) in scope.row.disks"
                                        :key="index"
                                    >
                                        <span>{{ item.diskServerName }}</span
                                        >，{{ item.dataDiskSize }}GB
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">数据库</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.databases" style="width: 100%">
                            <el-table-column
                                prop="databaseVersion"
                                label="版本"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="serverName"
                                label="类型"
                                width="180"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="databaseVersion"
                                label="位数"
                            ></el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">存储产品</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.storeProducts" style="width: 100%">
                            <el-table-column
                                prop="diskServerName"
                                label="磁盘类型"
                            >
                            </el-table-column>
                            <el-table-column
                                label="磁盘用量"
                                width="180"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.dataDiskSize}}GB
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="productCode"
                                label="存储类型"
                            ></el-table-column>
                            <el-table-column
                                prop="diskCode"
                                label="服务类型"
                            ></el-table-column>
                            <el-table-column
                                label="磁盘"
                            >
                                <template slot-scope="scope">
                                    {{
                                        scope.row.diskServerName
                                    }}，{{
                                        scope.row.dataDiskSize
                                    }}GB
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">安全产品</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.safeProducts" style="width: 100%">
                            <el-table-column
                                prop="productName"
                                label="产品名称"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="basic-information" v-if="type == 2">
                <div class="footer">
                    <div class="Table-title">云主机</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.hosts" style="width: 100%">
                            <el-table-column
                                prop="instanceName"
                                label="名称"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo?scope.row.changeTo.instanceName : scope.row.instanceName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="规格"
                                width="180"
                            >
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.changeTo?scope.row.changeTo.flavorType == 2 :scope.row.flavorType == 2">{{cloudFlavorCodeName(scope.row.changeTo?scope.row.changeTo.cloudFlavorCode : scope.row.cloudFlavorCode)}}</span>
                                    <span v-if="scope.row.changeTo?scope.row.changeTo.flavorType == 1 :scope.row.flavorType == 1">{{ scope.row.changeTo?scope.row.changeTo.cpuNumber:scope.row.cpuNumber }}核vCPU；{{ scope.row.changeTo?scope.row.changeTo.memorySize:scope.row.memorySize }}G内存；</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="osName"
                                label="操作系统"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo?scope.row.changeTo.osName:scope.row.osName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="系统盘容量"
                            >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.changeTo && scope.row.changeTo.flavorType == 1">{{
                                        scope.row.changeTo.osDisk?scope.row.changeTo.osDisk.diskServerName:''
                                    }}，{{ scope.row.changeTo.osDisk?scope.row.changeTo.osDisk.dataDiskSize:'' }}GB</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="数据盘容量"
                            >
                                <template slot-scope="scope">
                                    <div
                                        v-if="scope.row.changeTo && scope.row.changeTo.flavorType == 1 && scope.row.changeTo ? scope.row.changeTo.disks : scope.row.disks"
                                        style="margin: 0 0 6px 16px"
                                        v-for="(item, index) in scope.row.changeTo ? scope.row.changeTo.disks : scope.row.disks"
                                        :key="index"
                                    >
                                        <span>{{ item.diskServerName }}</span
                                        >，{{ item.dataDiskSize }}GB
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">数据库</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.databases" style="width: 100%">
                            <el-table-column
                                prop="databaseVersion"
                                label="版本"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo ? scope.row.changeTo.databaseVersion : scope.row.databaseVersion}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="serverName"
                                label="类型"
                                width="180"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo?scope.row.changeTo.serverName:scope.row.serverName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="databaseVersion"
                                label="位数"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo?scope.row.changeTo.databaseVersion:scope.row.databaseVersion}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">存储产品</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.storeProducts" style="width: 100%">
                            <el-table-column
                                prop="diskServerName"
                                label="磁盘类型"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo?scope.row.changeTo.diskServerName:scope.row.diskServerName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="磁盘用量"
                                width="180"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo?scope.row.changeTo.dataDiskSize:scope.row.dataDiskSize}}GB
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="productCode"
                                label="存储类型"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo?scope.row.changeTo.productCode:scope.row.productCode}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="diskCode"
                                label="服务类型"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo?scope.row.changeTo.diskCode:scope.row.diskCode}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="磁盘"
                            >
                                <template slot-scope="scope">
                                    {{
                                        scope.row.changeTo?scope.row.changeTo.diskServerName:scope.row.diskServerName
                                    }}，{{
                                        scope.row.changeTo?scope.row.changeTo.dataDiskSize:scope.row.dataDiskSize
                                    }}GB
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">安全产品</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.safeProducts" style="width: 100%">
                            <el-table-column
                                prop="productName"
                                label="产品名称"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { ResourcesUp ,ResourcesChange } from "@/api/Resource/index";
import {
    resourcesUpDetail,
} from "@/api/resources/apply";
import { treeselect } from "@/api/system/dept";
import { logicList } from "@/api/basic/services";
import {
    getResourcesChange,
} from "@/api/resources/change";
export default {
    data() {
        return {
            dialogVisible: false,
            dialogtitle: "资源申请订单详情",
            type: 1,
            tableData: [],
            total: 0,
            input: "",
            // 公共配置项
            configure:JSON.parse(sessionStorage.getItem('configure')),
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                searchValue : '',
            },
            officeId:null,
            DetailsData : null,
            // 云服务商列表
            logicListALL : [],
            // 部门数据
            deptOptions:[],
        };
    },
    created(){
        this.getData()
        // 获取部门数据
        treeselect().then((res) => {
            this.deptOptions = res.data;
        })
        // 获取云服务商列表
        logicList().then((res)=>{
            this.logicListALL = res.rows
        })
    },
    methods: {
        handleChange(row){
            if(row.length == 0){
                this.queryParams.officeId = null
            }else if(row.length == 1){
                this.queryParams.officeId = row[0]
            }else{
                this.queryParams.officeId = row[row.length-1]
            }
        },
        ChangeType(num) {
            this.type = num;
            if (num == 1) {
                this.dialogtitle = "资源申请订单详情";
                this.getData()

            } else {
                this.dialogtitle = "资源变更订单详情";
                this.getDatas()
            }
        },
        // 规格翻译
        cloudFlavorCodeName(id){
            let cloudFlavorCodeName
            this.configure.wlfwqList.forEach(item=>{
                if(item.code == id){
                    cloudFlavorCodeName = item.remark
                }
            })
            return cloudFlavorCodeName
        },
        // 订单详情
        OrderDetails(item) {
            if(this.type == 1){
                resourcesUpDetail(item.id).then(res=>{
                    this.DetailsData = res.data
                    this.dialogVisible = true;
                })
            }else{
                getResourcesChange({id: item.id,forUpdate:true}).then(res=>{
                    this.DetailsData = res.data
                    this.dialogVisible = true;
                })
            }
        },
        getData() {
            ResourcesUp(this.queryParams).then(res=>{
                this.tableData = res.rows
                this.total = res.total
            })
        },
        getDatas() {
            ResourcesChange(this.queryParams).then(res=>{
                this.tableData = res.rows
                this.total = res.total
            })
        },
    },
};
</script>
<style lang="scss" scoped>
.el-table{
    color: #000;
}
.app-container {
    // background-color: rgb(231, 237, 241);
    .container-fluid {
        background-color: #fff;
        overflow: hidden;
        display: flex;
        div {
            padding: 0 15px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            border: 1px solid #ddd;
            margin-bottom: 0;
            cursor: pointer;
        }
    }
    .tracking {
        margin-top: 20px;
        height: 140px;
        .titles {
            border-left: 6px solid #25a4f6;
            span {
                font-size: 16px;
                padding: 0 14px 0 24px;
                color: #25a4f6;
            }
        }
        .content {
            height: 60px;
            padding-left: 68px;
            margin-top: 30px;
            ul {
                width: 30%;
                height: 60px;
                margin-right: 30px;
                float: left;
                li {
                    height: 30px;
                    font-size: 14px;
                    color: #333333;
                    line-height: 30px;
                    list-style: none;
                    overflow: hidden;/*超出部分隐藏*/
                    white-space: nowrap;/*不换行*/
                    text-overflow:ellipsis;/*超出部分文字以...显示*/
                }
            }
        }
    }
    .titles {
        margin-top: 20px;
        border-left: 6px solid #25a4f6;
        span {
            font-size: 16px;
            padding: 0 14px 0 24px;
            color: #25a4f6;
        }
    }
    .basic-information {
        // margin-top: 20px;
        height: 600px;
        overflow-y: auto;
        .titles {
            border-left: 6px solid #25a4f6;
            span {
                font-size: 16px;
                padding: 0 14px 0 24px;
                color: #25a4f6;
            }
        }
        .footer {
            font-size: 14px;
            color: #555555;
            margin: 30px 80px 30px 80px;
            padding: 0;
            .Table-title {
                padding-top: 12px;
                padding-bottom: 12px;
                font-size: 14px;
                padding-left: 20px;
                padding-right: 20px;
                margin: 0;
                font-weight: bold;
            }
            .Table-list {
                background: #fff;
                padding: 10px 20px 20px 20px;
            }
        }
    }
}
</style>
